<template>
	<view class="order-box">
		<view class="bg-white">
			<view class="section">
				<!-- payment and amount begin -->
				<list-cell :hover="false" padding="50rpx 30rpx">
					<view class="w-100 flex-fill  d-flex flex-column align-items-center">
						<view>
							<view class="d-flex align-items-center">支付金额(元)</view>
							<view class="d-flex align-items-center" style="font-size:50rpx;">{{jiuzhenxinxi.moeny}}</view>
						</view>
					</view>
				</list-cell>
				<!-- payment and amount end -->
			</view>
			<view class="section">
				<!-- order info begin -->
				<list-cell :hover="false" padding="50rpx 30rpx">
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>费用类型</view>
							<view class="font-weight-bold">预约挂号</view>
						</view>
						<view class="pay-cell">
							<view>就诊科室</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi.keshiname }}</view>
						</view>
						<view class="pay-cell">
							<view>医生名称</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi.yishengname }}</view>
						</view>
						<view class="pay-cell">
							<view>就诊日期</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi.jiuzhenriqi}}</view>
						</view>
						<view class="pay-cell">
							<view>就诊时段</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi.jiuzhenshiduan}}</view>
						</view>
						<view class="pay-cell">
							<view>就诊人</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi.jiuzhenname}}</view>
						</view>
						<view class="pay-cell">
							<view>就诊卡号</view>
							<view class="font-weight-bold">{{ jiuzhenxinxi.jiuzhenkahao}}</view>
						</view>
					</view>
				</list-cell>

			</view>

		</view>
		<view>
			<button class="btn" @tap="btn()">确认挂号</button>
		</view>

	</view>

	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	import mm from '../../api/member.js'
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			listCell
		},
		data() {
			return {
				jiuzhenxinxi: [],
				
			}
		},
		computed: {
			...mapState(['order'])
		},
		onLoad() {
			this.getStrong();
		},
		methods: {
			orders() {
				if (!this.$store.getters.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/orders/orders'
				})
			},
			btn(){
				var data = {
					info: JSON.stringify({
						"keshiname":this.jiuzhenxinxi.keshiname,
						"yishengname":this.jiuzhenxinxi.yishengname ,
						"shiduan":this.jiuzhenxinxi.jiuzhenshiduan,
						"bingrenname":this.jiuzhenxinxi.jiuzhenname,
						"bingrencard":this. jiuzhenxinxi.jiuzhenkahao,
						"phone":this.jiuzhenxinxi.phone,
						"jiuzhenriqi":this.jiuzhenxinxi.jiuzhenriqi,
						"cost":this.jiuzhenxinxi.moeny,
						"yuanquid":this.jiuzhenxinxi.yuanquid,
						"position":this.jiuzhenxinxi.position,
						"openid":mm.openid
					})
				};
				this.$api.addguahao(data).then(res => {
					
						
					if(res){
						uni.navigateTo({
							url:'/pages/appointment/guahao'
						})
					}else{
						uni.showToast({
							title: '该用户当天已经挂号',
							icon:'none',
							duration: 2000
						});
					}
					
					
				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});
				
				})
			},

			getStrong() {
				this.jiuzhenxinxi = uni.getStorageSync('jiuzhenxinxi')
				console.log(this.jiuzhenxinxi)
			},

		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		min-height: 100%;
		background-color: $bg-color;
	}

	/* #endif */
	.order-box {
		padding: 20rpx;
		/* #ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
	}

	.drinks-img {
		width: 260rpx;
		height: 260rpx;
	}

	.tips {
		margin: 60rpx 0 80rpx;
		line-height: 48rpx;
	}

	.btn {
		margin: 20rpx auto;
		font-size: 32rpx;
		width: 95%;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #3ECEB6;
		color: #FFFFFF;
		height: 80rpx;
	}

	.drink-btn {
		width: 320rpx;
		border-radius: 50rem !important;
		margin-bottom: 40rpx;
		font-size: $font-size-base;
		line-height: 3.0;
	}

	@mixin arch {
		content: "";
		position: absolute;
		background-color: $bg-color;
		width: 30rpx;
		height: 30rpx;
		bottom: -15rpx;
		z-index: 10;
		border-radius: 100%;
	}

	.section {
		position: relative;

		&::before {
			@include arch;
			left: -15rpx;
		}

		&::after {
			@include arch;
			right: -15rpx;
		}
	}

	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}

	.sort-num {
		font-size: 64rpx;
		font-weight: bold;
		color: $text-color-base;
		line-height: 2;
	}

	.steps__img-column {
		display: flex;
		margin: 30rpx 0;

		.steps__img-column-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.steps__text-column {
		display: flex;
		margin-bottom: 40rpx;

		.steps__text-column-item {
			flex: 1;
			display: inline-flex;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-size-base;
			color: $text-color-assist;

			&.active {
				color: $text-color-base;
				font-weight: bold;

				.steps__column-item-line {
					background-color: $text-color-base;
				}
			}

			.steps__column-item-line {
				flex: 1;
				height: 2rpx;
				background-color: #919293;
				transform: scaleY(0.5);
			}

			.steps__text-column-item-text {
				margin: 0 8px;
			}
		}
	}
</style>
